<%--
  Created by IntelliJ IDEA.
  User: 檬zhu
  Date: 2021/12/12
  Time: 20:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>注册页面</title>
    <link rel="icon" href="${pageContext.request.contextPath}/resources/images/index.jpg" type="image/x-icon"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/index.css"/>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
    <SCRIPT src="${pageContext.request.contextPath}/resources/js/jquery-1.9.1.min.js" type="text/javascript"></SCRIPT>

</head>
<body>
<%
    /*将验证码失效*/
    if (request.getSession().getAttribute("code")!=null){
        request.getSession().removeAttribute("code");
    }

    Object obj = request.getAttribute("verifyCodeError");
    if (obj != null) {
        out.println("<script language='JavaScript'>alert('验证码错误');window.location.href='/registerPage'</script>");
        return;
    }

    if (request.getAttribute("account") != null) {
        String account = String.valueOf(request.getAttribute("account"));
        out.println("<script language='JavaScript'>alert('您的账号为:" + account + "');window.location.href='/'</script>");
        return;
    }

    if (request.getAttribute("alreadyRegistered") != null) {
        String account = String.valueOf(request.getAttribute("alreadyRegistered"));
        out.println("<script language='JavaScript'>alert('该手机号已经注册!!!!账号为:" + account + "');window.location.href='/'</script>");
        return;
    }
%>
<DIV class="top_div size" style="color: #FFFFFF;">
    <div style="float: left;height: 330px">
        <img src="../resources/images/order.png" width="500px" height="350px">
    </div>
    <br>
    <p style="margin-right: 550px; font-size: 60px">网上订餐系统</p>
    <p style="float: right;font-size: 30px;margin-top: 100px">─────Web开发技术课程设计</p>
</DIV>
<iframe name="sendSMS" style="display:none;">
</iframe>
<div class="bot_div">
    <div style="background-color: #FFFFFF; float: left; width: 800px; height: 350px; margin-left: 50px; margin-top: 20px">
        <p class="size">Welcome to</p>
        <p class="size">order.com</p>
        <p style="font-size: 15px" class="size">or login with</p>
        <p style="text-align: center; margin-top: 12px">
            <span style="font-family: Impact, Haettenschweiler, ‘Arial Narrow Bold’, sans-serif;" class="b_size">f</span>
            <span><i class="layui-icon layui-icon-location b_size"></i></span>
            <span><i class="layui-icon layui-icon-share b_size"></i></span>
        </p>
    </div>
    <form style="background: rgb(255, 255, 255); margin: 50px 10px 10px 950px; border-image: none; width: 400px; height: 280px; text-align: center;"
          name="mobileform" action="${pageContext.request.contextPath}/register" method="post">
        <P style="padding: 30px 0 10px; position: relative;"><SPAN class="t_logo" style="top: 27px;">
        <i class="layui-icon layui-icon-cellphone" style="font-size: 25px; margin-left: 10px"></i></SPAN>
            <INPUT class="ipt" type="tel" id="tel" name="tel" placeholder="请输入手机号" value="">
        </P>
        <P style="padding: 0px 0px 10px;position: relative;"><SPAN class="u_logo" style="top: -3px;"><i class="layui-icon layui-icon-username" style="font-size: 25px; margin-left: 10px"></i></SPAN>
            <INPUT class="ipt" name="username" id="username" type="text" placeholder="请输入你的用户名" value="">
        </P>
        <P style="padding: 0px 0px 10px;position: relative;"><SPAN class="p_logo" style="top: -3px;"><i class="layui-icon layui-icon-password" style="font-size: 25px; margin-left: 10px"></i></SPAN>
            <INPUT class="ipt" name="password" id="password" type="password" placeholder="请输入密码" value="">
        </P>
        <P style="padding: 0px 0px 10px;position: relative;"><SPAN class="rep_logo" style="top: -3px;">
        <i class="layui-icon layui-icon-password" style="font-size: 25px; margin-left: 10px"></i></SPAN>
            <INPUT class="ipt" name="rePwd" id="rePwd" type="password" placeholder="请再次输入密码" value="">
        </P>
        <DIV style="height: 50px; line-height: 50px; margin-top: 10px;">
            <P style="margin: 0 35px 20px 35px;">
            <SPAN>
              <input type="submit" id="register"
                     style="margin-top:20px;width:290px;background: #0099CC; padding:7px 10px; border-radius: 4px; border: 1px solid rgb(26, 117, 152); border-image: none; color: rgb(255, 255, 255); font-weight: bold;"
                     value="注册"/>
                <br>
                 <A style="color: #0099CC; margin-right: 10px;"
                    href="/">返回登录</A>
           </SPAN>
            </P></DIV>
    </form>
</div>
<script type="text/javascript">


    function registerCheck() {
        const tel = document.getElementById("tel").value;
        if (!(/^1[3|5|7|8][0-9]\d{8}$/.test(tel))) {
            alert("手机号格式不正确");
            document.mobileform.tel.focus();
            return false;
        }
        const username = document.getElementById("username").value;
        if (username.length === 0) {
            alert('请输入用户名')
            return false;
        }

        const pwd = $("#password").val().trim();
        const rePwd = $("#rePwd").val().trim();
        if (pwd.length === 0) {
            alert("请输入密码");
            return false
        }
        if (pwd != rePwd) {
            alert("两次密码输入不一致")
            return false;
        }
        return true;
    }

    document.getElementById("register").onclick = function () {
        return registerCheck();
    }
</script>
</body>
</html>
